<template>

	<view class="content">
		<swiper class="swiper_wrap" indicator-dots="indicatorDots" autoplay="autoplay" interval="interval"
			duration="duration">
			<swiper-item v-for="(item , index) in homeSlide" :key="index">
				<!-- <image :src="item.url" mode="aspectFill"></image> -->
				<view class="banner">
					<image :src="item.url"></image>
					<view class="btn_detail_wrap">
						<view class="btn_detail" @click="toFoodDetail">
							查看详情
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="img_item">
		<image src="/static/meishi.png"></image>
	</view>
	<view class="content">
		<view class="cp-xiangmu" v-for="item in List">
			  <image :src="item.url" class='cp_tupian' mode='widthFix'></image>
		</view>
	</view>
	<view class="img_item">
		<image src="/static/jingxuanmeishi.png"></image>
	</view>
	<view class="content">
		<view class="cp-xiangmus" v-for="item in foodList">
			<view class="content">
				  <image :src="item.url" @click="navTo('/pages/food/food?id='+item.id)" class='cp_tupians'
					mode='widthFix'></image>
				<text class='cp-biaoti'>{{item.fname}}</text>
				<text class='cp-yueshou'>月售 {{item.number}}</text>
				<text class='cp-biaoti'>¥{{item.money}}</text>
				<view class="gengduo">
					<view class="gouwuche" @click="addCat(item)">加入购物车</view>
				</view>
			</view>
		</view>
	</view>
	<view class="gengduo">
		<text class='txt_gd'>更多菜品</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				homeSlide: [], // 定义值接收轮播图数据
				List: [],
				foodList: [],
				user: '',

			}
		},
		onLoad() {
			this.authLogin();
			this.getHomeSlideFunc();
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			getHomeSlideFunc() {
				var _self = this;
				uni.request({
					url: 'https://www.xinyixjc.com/miniapp/api/homeInfo',
					success: (res) => {
						console.log(res.data.data.banners);
						_self.homeSlide = res.data.data.banners;
						_self.List = res.data.data.foodTypes;
						_self.foodList = res.data.data.foods;
					}
				});
			},
			async authLogin() {
				var _this = this;
				////弹窗授权
				//showModal用于触发uni.getUserProfile弹窗
				if (!uni.getStorageSync('user')) {
					uni.showModal({
						title: '授权登录',
						content: '是否授权登录微信小程序？',
						success: () => {
							uni.getUserProfile({
								desc: '登录后可同步数据',
								lang: 'zh_CN',
								success: (infoRes) => {
									console.log('用户信息-----------', infoRes)
									//获取code
									uni.login({
										provider: 'weixin',
										success: (loginRes) => {
											console.log('获取code-----------',
												loginRes)
											//调用接口传递参数
											let parames = {
												code: loginRes.code,
												encryptedData: infoRes
													.encryptedData,
												iv: infoRes.iv,
												signature: infoRes.signature,
												rawData: infoRes.rawData
											};
											console.log('将参数传给后端-----------',
												parames)
											console.log(loginRes.code);
											uni.request({
												url: 'https://www.xinyixjc.com/miniapp/api/authLogin',
												data: {
													code: loginRes.code,
													encryptedData: infoRes
														.encryptedData,
													iv: infoRes.iv,
												},
												method: 'GET'
											}).then((res) => {
												//获取到 openid 和 session_k后，自己的逻辑
												console.log("接口请求---->" +
													res
													.data.data.id);
												if (res.data.status ==
													1001) {
													uni.setStorageSync(
														'user',
														res.data.data)

												} else {
													console.log("登录失败");
												}
											});
										},
										fail: function(err) {
											uni.showToast({
												icon: 'none',
												title: '授权失败'
											})
										}
									});
								},
								fail: function(err) {
									uni.showToast({
										icon: 'none',
										title: '授权失败'
									})
								}
							});
						}
					})
					//未弹窗授权
					// 获取用户信息， 传给后端换取openid / uuid
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							console.log('infoRes', infoRes)
							//获取code
							uni.login({
								provider: 'weixin',
								success: (loginRes) => {
									console.log('loginRes', loginRes);
									//调用接口传递参数
									let parames = {
										code: loginRes.code,
										encryptedData: infoRes.encryptedData,
										iv: infoRes.iv,
										signature: infoRes.signature,
										rawData: infoRes.rawData
									};
								},
								fail: function(err) {
									uni.showToast({
										icon: 'none',
										title: '授权失败，请重新授权'
									})
								}
							});
						},
						fail: function(err) {
							uni.showToast({
								icon: 'none',
								title: '授权失败，请重新授权'
							})
						}
					});
				} else {
					console.log("用户信息====》" + uni.getStorageSync('user'));
				}

			},
			addCat(item) {
				var _self = this;
				uni.request({
					url: 'https://www.xinyixjc.com/miniapp/api/addCat',
					method: 'POST',
					data: {
						foodId: item.id,
						sum: 1,
						userId: uni.getStorageSync('user').id

					},
					//post提交的时候加上这个header
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'xmlhttprequest'
					},
					success: (res) => {
						if (res.data.status == 1001) {
							uni.showToast({
								title: "添加成功"
							})
						} else {
							uni.showToast({
								title: "添加失败"
							})
						}

					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-wrap: wrap;
	}

	.cp_tupian {
		width: 100%;
	}

	.swiper_wrap {
		width: 100%;
		height: 330px;
	}

	.btn_detail_wrap {
		position: absolute;
		width: 100%;
		left: 50%;
		margin-left: -54px;
		bottom: 52px;
	}

	.banner {
		width: 100%;
		height: 330px;
		position: relative;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.cp-biaoti {
		width: 100%;
		color: #242724;
		margin-top: 10px;
		font-size: 15px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.gengduo {
		width: 100%;
		height: 36px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.txt_gd {
		width: 147px;
		height: 36px;
		background: #242724;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		color: white;
		display: flex;
		margin-bottom: 30px;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.gouwuche {
		width: 100px;
		height: 30px;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
		margin-bottom: 30px;
		opacity: 1;
		border: 1px solid #242724;
	}

	.cp-yueshou {
		width: 100%;
		color: #979797;
		margin-top: 2px;
		font-size: 12px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}


	.cp-xiangmu {
		width: 50%;
		display: flex;
		padding: 3px;
		box-sizing: border-box;
		flex-direction: column;

	}

	.cp_tupians {
		width: 127px;
		height: 127px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.cp-xiangmus {
		width: 50%;
		height: 298px;
		display: flex;
		padding: 3px;
		box-sizing: border-box;
		flex-direction: column;
	}

	.swiper {
		width: 100%;
		height: 500rpx;
		vertical-align: bottom;
	}

	.swiper-item image {
		width: 100%;
		height: 330px;
		position: relative;
	}

	.img_item {
		width: 100%;
		height: auto;
		margin-top: 30px;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.img_item image {
		width: 126px;
		height: 60px;
	}
</style>
